<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html lang="en">
<jsp:include page="header.jsp">
	<jsp:param name="pageTitle" value="${community.name}" />
</jsp:include>
<script type="text/javascript">
	var communityId = ${community.id};
	var isMember = ${membership.isMember};
	var stuffObj, eventObj, serviceObj;
	$(function() {

		// filtering functions
		$("#filterStuff").click(function() {
			$(".stuffItem").slideDown();
			$(".serviceItem").slideUp();
			$(".eventItem").slideUp();
		});
		$("#filterService").click(function() {
			$(".serviceItem").slideDown();
			$(".stuffItem").slideUp();
			$(".eventItem").slideUp();
		});
		$("#filterEvent").click(function() {
			$(".eventItem").slideDown();
			$(".serviceItem").slideUp();
			$(".stuffItem").slideUp();
		});
		$("#filterAll").click(function() {
			$(".eventItem").slideDown();
			$(".serviceItem").slideDown();
			$(".stuffItem").slideDown();
		});
	});
</script>
<c:if test="${not empty sessionUser}">
	<script type="text/javascript">
		$(function() {
			// initializing the calendar for choosing date
			$("#stuffDate").datepicker({
				weekStart : 1
			});

			$("#eventDate").datepicker({
				weekStart : 1
			});

			$("#serviceDate").datepicker({
				weekStart : 1
			});

			// add stuff method		
			$("#addStuffButton")
					.click(
							function() {
								var stuffDate = $("#stuffDate").val();
								stuffDate = stuffDate.split(".");
								stuffDate = new Date(stuffDate[1] + "/"
										+ stuffDate[0] + "/" + stuffDate[2])
										.getTime();
								stuffObj = {
									id : null,
									amountRequested : $("#stAmountRequested")
											.val(),
									name : $("#stName").val(),
									description : $("#stDescription").val(),
									location : $("#stLocation").val(),
									datetime : stuffDate,
									communityid : communityId,
									amountContributed : 0
								};
								console.log(JSON.stringify(stuffObj));
								$
										.ajax({
											url : "stuff/new",
											type : "POST",
											data : JSON.stringify(stuffObj),
											contentType : "application/json",
											accepts : "application/json"
										})
										.done(
												function(s) {
													if (s == null) {
														console
																.alert("Please fill the required fields.");
														return;
													}
													console
															.log("success for add stuff "
																	+ s);
													var completeRate = s.amountContributed
															/ s.amountRequested
															* 100;
													var stuffDiv = "<div class='col-md-12 stuffItem'><p><strong>"
															+ s.name
															+ "</strong> <span class='pull-right text-muted'>"
															+ completeRate
															+ "% Complete</span> </p> <div class='progress progress-striped active'>"
															+ "<div class='progress-bar progress-bar-primary' role='progressbar'"
															+ " aria-valuemin='0' aria-valuemax='"
															+ s.amountRequested
															+ " style='width:"
															+ completeRate
															+ "%'> </div> </div> <div></div> </div>";
													$("#allActivities")
															.prepend(stuffDiv);
													$("#addStuff")
															.modal('hide');
													$("#noActivities").hide();
												})
										.error(
												function(e) {
													console
															.log("error for add stuff "
																	+ e);
													alert("An error occurred. Please try again.");
												});
							});

			// add service method
			$("#addServiceButton")
					.click(
							function() {
								var serviceDate = $("#serviceDate").val();
								serviceDate = serviceDate.split(".");
								serviceDate = new Date(serviceDate[1] + "/"
										+ serviceDate[0] + "/" + serviceDate[2])
										.getTime();
								serviceObj = {
									id : null,
									name : $("#serviceName").val(),
									description : $("#serviceDescription")
											.val(),
									serviceNumberRequested : $("#serviceNumber")
											.val(),
									location : $("#serviceLocation").val(),
									endDateTime : serviceDate,
									communityid : communityId,
									serviceNumberContributed : 0
								};
								console.log(JSON.stringify(serviceObj));
								$
										.ajax({
											url : "service/new",
											type : "POST",
											data : JSON.stringify(serviceObj),
											contentType : "application/json",
											accepts : "application/json"
										})
										.done(
												function(s) {
													if (s == null) {
														console
																.alert("Please fill the required fields.");
														return;
													}
													console
															.log("success for add service "
																	+ s);
													var completeRate = s.serviceNumberContributed
															/ s.serviceNumberRequested
															* 100;
													var serviceDiv = "<div class='col-md-12 serviceItem'><p><strong>"
															+ s.name
															+ "</strong> <span class='pull-right text-muted'>"
															+ completeRate
															+ "% Complete</span> </p> <div class='progress progress-striped active'>"
															+ "<div class='progress-bar progress-bar-primary' role='progressbar'"
															+ " aria-valuemin='0' aria-valuemax='"
															+ s.serviceNumberRequested
															+ " style='width:"
															+ completeRate
															+ "%'> </div> </div> <div></div> </div>";
													$("#allActivities")
															.prepend(serviceDiv);
													$("#addService").modal(
															'hide');
													$("#noActivities").hide();
												})
										.error(
												function(e) {
													console.log(e);
													alert("An error occurred. Please try again.");
												});
							});

			// add event method
			$("#addEventButton")
					.click(
							function() {
								var eventDate = $("#eventDate").val();
								eventDate = eventDate.split(".");
								eventDate = new Date(eventDate[1] + "/"
										+ eventDate[0] + "/" + eventDate[2])
										.getTime();
								eventObj = {
									id : null,
									name : $("#eventName").val(),
									description : $("#eventDescription").val(),
									location : $("#eventLocation").val(),
									datetime : eventDate,
									communityid : communityId
								};
								console.log(JSON.stringify(eventObj));
								$
										.ajax({
											url : "event/new",
											type : "POST",
											data : JSON.stringify(eventObj),
											contentType : "application/json",
											accepts : "application/json"
										})
										.done(
												function(e) {
													if (e == null) {
														console
																.alert("Please fill the required fields.");
														r
														return;
													}
													console
															.log("success for add event "
																	+ e);
													var eventDiv = "<div class='col-md-12 eventItem'><p><strong>"
															+ e.name
															+ "</strong> </div>";
													$("#allActivities")
															.prepend(eventDiv);
													$("#addEvent")
															.modal('hide');
													$("#noActivities").hide();
												})
										.error(
												function(e) {
													console
															.log("error for add event "
																	+ e);
													alert("An error occurred. Please try again.");
												});
							});

			// membership button
			$("#membershipButton").click(function() {
				var url;
				var previousText = $("#membershipButton").html();
				$("#membershipButton").html("...");
				if (isMember) {
					url = "leave";
					
				} else {
					url = "join";
				}
				$.ajax({
					url : url,
					type : "POST",
					accepts : "application/json"
				}).done(function(success) {
					if (success) {
						isMember = !isMember;
						if (isMember) {
							$("#membershipButton").html("Joined");
						} else {
							$("#membershipButton").html("Join");
						}
					} else {
						$("#membershipButton").html(previousText);
					}
				}).error(function(e) {
					$("#membershipButton").html(previousText);
					console.log("error for joining " + e);
					alert("An error occurred. Please try again.");
				});
			});
		});
	</script>
</c:if>
<style type="text/css">
.datepicker {
	z-index: 1151 !important;
}

.container-fluid {
	margin-top: 40px;
	padding-bottom: 50px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.left-clm-comm-detail {
	position: relative;
	min-height: 1px;
}

.label-comm-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 16px;
}

.label-welcome {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.comm-detail,.comm-name-detail {
	border: auto;
	border: 1px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.member-detail {
	border: auto;
	border: 1px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	color: #f05607;
	width: 80%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.member {
	margin-top: 30px;
	width: 100%;
	height: 40px;
	background-color: #44BBF8;
	color: #f05607;
	font-size: 18px;
	line-height: 1.33;
}

.btn-group-vertical {
	padding: 10px 40px;
	width: 100%;
	margin: 3px 3px;
	position: relative;
}
}
</style>
<div class="container-fluid">
	<div class="row">
		<div class="col-lg-3 col-md-3">
			<div class="panel panel-danger">
				<div class="panel-heading">
					<div class="row">
						<div class="col-xs-3">
							<i class="fa fa-tasks fa-2x"></i> <i
								class="fa fa-shopping-cart fa-2x"></i> <i
								class="fa fa-comments fa-2x"
								style="position: absolute; top: 15px; left: 50px;"></i>
						</div>
						<div class="col-xs-9 text-right">
							<div class="huge">${stuffs.size() + services.size() + events.size()}</div>
							<div>Activities!</div>
						</div>
					</div>
				</div>
				<a href="#" id="filterAll">
					<div class="panel-footer">
						<span class="pull-left">All Activities</span> <span
							class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
						<div class="clearfix"></div>
					</div>
				</a>
			</div>
		</div>

		<div class="col-lg-3 col-md-3">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="row">
						<div class="col-md-3">
							<i class="fa fa-comments fa-5x"></i>
						</div>
						<div class="col-md-9 text-right">
							<div class="huge">${stuffs.size()}</div>
							<div>Stuffs!</div>
						</div>
					</div>
				</div>
				<a href="#" id="filterStuff">
					<div class="panel-footer">
						<span class="pull-left">Filter Stuffs</span> <span
							class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
						<div class="clearfix"></div>
					</div>
				</a>
			</div>
		</div>
		<div class="col-lg-3 col-md-3">
			<div class="panel panel-yellow">
				<div class="panel-heading">
					<div class="row">
						<div class="col-md-3">
							<i class="fa fa-tasks fa-5x"></i>
						</div>
						<div class="col-md-9 text-right">
							<div class="huge">${services.size()}</div>
							<div>Services!</div>
						</div>
					</div>
				</div>
				<a href="#" id="filterService">
					<div class="panel-footer">
						<span class="pull-left">Filter Services</span> <span
							class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
						<div class="clearfix"></div>
					</div>
				</a>
			</div>
		</div>
		<div class="col-lg-3 col-md-3">
			<div class="panel panel-green">
				<div class="panel-heading">
					<div class="row">
						<div class="col-xs-3">
							<i class="fa fa-shopping-cart fa-5x"></i>
						</div>
						<div class="col-xs-9 text-right">
							<div class="huge">${events.size()}</div>
							<div>Events!</div>
						</div>
					</div>
				</div>
				<a href="#" id="filterEvent">
					<div class="panel-footer">
						<span class="pull-left">Filter Events</span> <span
							class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
						<div class="clearfix"></div>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="row">
		<!-- Left column for description -->
		<div class="col-md-3 no-float left-clm-comm-detail">
			<div class="comm-name-detail">
				<label class="label-comm-name-detail">${community.name}</label>
			</div>
			<div class="comm-detail">
				<td>${community.description}</td>
			</div>
			<c:if test="${not empty sessionUser}">
				<div class="btn-group-vertical" role="group" aria-label="...">
					<c:choose>
						<c:when test="${membership.isMember}">
							<c:choose>
								<c:when test="${membership.role eq 'MEMBER'}">
									<button id="membershipButton"
										class="btn btn-lg btn-default member">Joined</button>
								</c:when>
								<c:otherwise>
									<button class="btn btn-lg btn-default" disabled="disabled">Creator</button>
								</c:otherwise>
							</c:choose>
						</c:when>
						<c:otherwise>
							<button id="membershipButton"
								class="btn btn-lg btn-default member">Join</button>
						</c:otherwise>
					</c:choose>
				</div>
				<div class="btn-group-vertical" role="group" aria-label="...">
					<a href="#" data-toggle="modal" type="button"
						class="btn btn-lg btn-primary" data-target="#addStuff">Add
						Stuff </a> <a href="#" data-toggle="modal" data-target="#addService"
						type="button" class="btn btn-lg btn-warning"> Add Service </a> <a
						href="#" data-toggle="modal" data-target="#addEvent" type="button"
						class="btn btn-lg btn-success"> Add Event </a>
				</div>
			</c:if>
			<div class="comm-name-detail">
				<label class="label-comm-name-detail">Members</label>
			</div>
			<c:forEach var='mem' items="${members}">
				<div class="row">
					<div class="member-detail">
						<td>${mem.name}&nbsp;${mem.surname}</td>
					</div>
					<c:if test="${not empty mem.profilePicLoc}">
						<img src='/img/${mem.profilePicLoc}' />
					</c:if>
				</div>
			</c:forEach>
		</div>
		<!-- main column of stuffs, services and events -->
		<div class="col-md-6 no-float">
			<div class="row">
				<div class="col-md-12 no-float">
					<label class="label-welcome">Welcome</label>
				</div>
				<div id="allActivities">
					<c:choose>
						<c:when
							test="${stuffs.size() + services.size() + events.size() == 0}">
							<span id="noActivities">There is no stuff, service or
								event. Add one by using the menu on the left.</span>
						</c:when>
						<c:otherwise>

							<c:forEach var="s" items="${stuffs}">
								<fmt:formatNumber var="completeRate"
									value="${s.amountContributed/s.amountRequested * 100}"
									maxFractionDigits="2" />
								<div class="col-md-12 stuffItem">
									<p>
										<strong><a
											href="<c:url value="/community/${community.id}/stuff/${s.id}/" ></c:url>">${s.name}</a></strong>
										<span class="pull-right text-muted">${completeRate}%
											Complete</span>
									</p>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-primary"
											role="progressbar" aria-valuemin="0"
											aria-valuemax="${s.amountRequested}"
											style="width:${s.amountContributed/s.amountRequested * 100}%">
										</div>
									</div>
								</div>
							</c:forEach>
							<c:forEach var="se" items="${services}">
								<fmt:formatNumber var="completeRate"
									value="${se.serviceNumberContributed/se.serviceNumberRequested * 100}"
									maxFractionDigits="2" />
								<div class="col-md-12 serviceItem">
									<p>
										<strong><a
											href="<c:url value="/community/${community.id}/service/${se.id}/" ></c:url>">${se.name}</a></strong>
										<span class="pull-right text-muted">${completeRate}%
											Complete</span>
									</p>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning"
											role="progressbar" aria-valuemin="0"
											aria-valuemax="${se.serviceNumberRequested}"
											style="width:${se.serviceNumberContributed/se.serviceNumberRequested * 100}%">
										</div>
									</div>
								</div>
							</c:forEach>
							<c:forEach var="e" items="${events}">
<%-- 										<fmt:formatNumber var="completeRate" --%>
<%-- 									value="${se.serviceNumberContributed/se.serviceNumberRequested * 100}" --%>
<%-- 									maxFractionDigits="2" /> --%>
								<div class="col-md-12 eventItem">
									<p>
										<strong><a
											href="<c:url value="/community/${community.id}/event/${e.id}/" ></c:url>">${e.name}</a></strong>
									</p>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning"
											role="progressbar" aria-valuemin="0"
											aria-valuemax="0"
											style="width:0%">
										</div>
									</div>
								</div>
								
							</c:forEach>

						</c:otherwise>
					</c:choose>
				</div>
			</div>
		</div>
		<!-- activity feed column -->
		<div class="col-md-3 no-float">
			<div class="row">
				<div id="allActivities" style="margin-left:18px;">
					<c:choose>
						<c:when
							test="${feedItems.size() == 0}">
							<span id="noActivities">There is no activity.</span>
						</c:when>
						<c:otherwise>
							<c:forEach var="fi" items="${feedItems}">
								<%-- stuffContribution (0), serviceContribution (1), eventAttendance (2) --%>
								<c:choose>
									<c:when test="${fi.type eq 0}">
										<div class="row">${fi.userName}
											contributed to <a
												href="<c:url value="/community/${community.id}/stuff/${fi.activityID}/" ></c:url>">${fi.activityName}</a>
											<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
											with the amount of ${fi.amountContributed}.
										</div>
									</c:when>
									<c:when test="${fi.type eq 1}">
										<div class="row">${fi.userName}
											contributed to <a
												href="<c:url value="/community/${community.id}/service/${fi.activityID}/" ></c:url>">${fi.activityName}</a>
											<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
											with the amount of ${fi.amountContributed}.
										</div>
									</c:when>
									<c:otherwise>
										<c:choose>
											<c:when test='${fi.role eq "MODERATOR"}'>
												<div class="row">
													${fi.userName} created the event <a
														href="<c:url value="/community/${community.id}/event/${fi.activityID}/" ></c:url>">${fi.activityName}</a>
													<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
													.
												</div>
											</c:when>
											<c:otherwise>
												<div class="row">
													${fi.userName} declared attendance for the event <a
														href="<c:url value="/community/${community.id}/event/${fi.activityID}/" ></c:url>">${fi.activityName}</a>
													<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
													.
												</div>
											</c:otherwise>
										</c:choose>
									</c:otherwise>
								</c:choose>
							<br>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Add Stuff Dialog -->
<div class="modal fade" id="addStuff" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Add Stuff Request</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="stAmountRequested" class="control-label">Requested
						Amount</label> <input type="number" id="stAmountRequested"
						class="form-control" required="required" />
				</div>
				<div class="form-group">
					<label for="stName" class="control-label">Name</label> <input
						type="text" id="stName" class="form-control" required="required" />
				</div>
				<div class="form-group">
					<label for="stDescription" class="control-label">Description</label>
					<textarea id="stDescription" class="form-control"
						required="required"></textarea>
				</div>
				<div class="form-group">
					<label for="stuffDate" class="control-label">Due Date</label> <input
						id="stuffDate" data-date-format="dd.mm.yyyy" class="form-control"
						name="datetime" />
				</div>
				<div class="form-group">
					<label for="stLocation" class="control-label">Location</label> <input
						type="text" id="stLocation" class="form-control"
						required="required" />
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" id="addStuffButton">Add</button>
			</div>
		</div>
	</div>
</div>

<!-- Add Event Dialog -->
<div class="modal fade" id="addEvent" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Add Event Request</h4>
			</div>
			<div class="modal-body">

				<div class="form-group">
					<label for="eventName" class="control-label">Name</label> <input
						type="text" id="eventName" class="form-control"
						required="required" />
				</div>
				<div class="form-group">
					<label for="eventDescription" class="control-label">Description</label>
					<textarea id="eventDescription" class="form-control"
						required="required"></textarea>
				</div>
				<div class="form-group">
					<label for="eventDate" class="control-label">Due Date</label> <input
						id="eventDate" data-date-format="dd.mm.yyyy" class="form-control"
						name="eventdatetime" />
				</div>
				<div class="form-group">
					<label for="eventLocation" class="control-label">Location</label> <input
						type="text" id="eventLocation" class="form-control"
						required="required" />
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" id="addEventButton">Add</button>
			</div>
		</div>
	</div>
</div>

<!-- Add Service Dialog -->
<div class="modal fade" id="addService" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Add Service Request</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="serviceNumber" class="control-label">Service
						Number</label> <input type="number" id="serviceNumber"
						class="form-control" required="required" />
				</div>

				<div class="form-group">
					<label for="serviceName" class="control-label">Name</label> <input
						type="text" id="serviceName" class="form-control"
						required="required" />
				</div>
				<div class="form-group">
					<label for="serviceDescription" class="control-label">Description</label>
					<textarea id="serviceDescription" class="form-control"
						required="required"></textarea>
				</div>
				<div class="form-group">
					<label for="serviceDate" class="control-label">Due Date</label> <input
						id="serviceDate" data-date-format="dd.mm.yyyy"
						class="form-control" name="servicedatetime" />
				</div>
				<div class="form-group">
					<label for="serviceLocation" class="control-label">Location</label>
					<input type="text" id="serviceLocation" class="form-control"
						required="required" />
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" id="addServiceButton">Add</button>
			</div>
		</div>
	</div>
</div>
</body>
</html>
